<template>
  <Dialog :title="title" :loading="loading" class="single-column" :visible="visible" button-text="保存" :reveal="true" @close="handleClose" @confirm="balanceSubmit">
    <!-- 增加投诉 -->
    <div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="顾客：" prop="customerId">
          <el-select v-model="ruleForm.customerId" filterable placeholder="请选择顾客" class="el-select-y" @change="customerChange">
            <el-option
              v-for="item in customerList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="投诉类型：" prop="complaintType">
          <el-select v-model="ruleForm.complaintType" placeholder="请选择投诉类型" class="el-select-y">
            <el-option
              v-for="item in complaintTypeList"
              v-show="item.id !== 0"
              :key="item.id"
              :label="item.value"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联项目：" prop="projectId">
          <el-select v-model="ruleForm.projectId" placeholder="请选择关联项目" class="el-select-y" @change="projectChange">
            <el-option
              v-for="item in projectNameOptions"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            >
              <el-col :span="12">{{ item.projectName }}</el-col>
              <el-col :span="12">{{ item.attendingDoctor }}</el-col>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投诉方式：" prop="complaintMode">
          <el-select v-model="ruleForm.complaintMode" placeholder="请选择投诉方式" class="el-select-y">
            <el-option
              v-for="item in complaintModeList"
              v-show="item.id !== 0"
              :key="item.id"
              :label="item.value"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话：" prop="customerPhone">
          <el-input v-model.number="ruleForm.customerPhone" />
        </el-form-item>
        <el-form-item label="投诉内容：" prop="complaintContent">
          <el-input v-model="ruleForm.complaintContent" type="textarea" :rows="2" placeholder="请输入投诉内容" class="textarea-border" />
        </el-form-item>
        <el-form-item label="生成工单：" prop="generateWorkOrder">
          <el-radio-group v-model="ruleForm.generateWorkOrder">
            <el-radio label="是" />
            <el-radio label="否" />
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="ruleForm.generateWorkOrder === '否'" label="处理内容：" prop="handlerProgramme">
          <el-input v-model="ruleForm.handlerProgramme" type="textarea" :rows="2" placeholder="请输入处理内容" class="textarea-border" />
        </el-form-item>
        <el-form-item v-if="ruleForm.generateWorkOrder === '是'" label="截止日期：" :prop="ruleForm.generateWorkOrder === '是'?'closingDate':''">
          <el-date-picker
            v-model="ruleForm.closingDate"
            type="date"
            placeholder="选择截止日期"
            :picker-options="pickerOptions"
            @change="plannedReturnVisitDateChange"
          />
        </el-form-item>
        <el-form-item v-if="ruleForm.generateWorkOrder === '是'" label="处理人：" :prop="ruleForm.generateWorkOrder === '是'?'handlerName':''">
          <el-select v-model="ruleForm.handlerName" filterable placeholder="请选择处理人" class="el-select-y">
            <el-option
              v-for="item in allUsr"
              :key="item.id"
              :label="item.usrName"
              :value="item.usrName"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>
<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  props: {
    currentRow: {
      type: Object,
      default: () => ({}),
    },
    visible: {
      type: Boolean,
      default: false,
    },
    complaintTypeList: {
      type: Array,
      default: () => ([]),
    },
    complaintModeList: {
      type: Array,
      default: () => ([]),
    },
    title: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ruleForm: {
        generateWorkOrder: '否',
      },
      loading: false,
      plannedReturnVisitDate: "",
      customerList: [],
      projectNameOptions: [],
      allUsr: [],
      rules: {
        customerId: [
          { message: '请选择顾客', trigger: 'change', required: true },
        ],
        complaintType: [
          { message: '请选择投诉类型', trigger: 'change', required: true },
        ],
        complaintMode: [
          { message: '请选择投诉方式', trigger: 'change', required: true },
        ],
        closingDate: [
          { message: '请选择截止日期', trigger: 'blur', required: true },
        ],
        handlerName: [
          { message: '请选择处理人', trigger: 'change', required: true },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          const times = Date.now() - 24 * 60 * 60 * 1000;
          return time.getTime() < times;
        },
      },
    };
  },
  watch: {
    currentRow: {
      handler(val) {
        if (val.id) {
          this.plannedReturnVisitDate = val.closingDate;
          this.ruleForm = val;
          this.getProjectName();
        } else {
          this.ruleForm = {
            generateWorkOrder: '否',
          };
        }
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getAllCustomer();
    this.fetchAllUsr();
  },
  methods: {
    async getAllCustomer() {
      const res = await this.$api["department/consumables/customerall"]();
      if (res.code !== 200) return this.$message.error(res.msg);
      this.customerList = res.data;
    },
    async fetchAllUsr() { // 获取全部医院人员
      const res = await this.$api['doctor/consulting/getAllUsr']({});
      if (res.code !== 200) return this.$message.error('查询医院人员失败！');
      this.allUsr = res.data;
    },
    handleClose() {
      this.$emit("handleClose");
    },
    balanceSubmit() {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return;
        this.loading = true;
        this.ruleForm.receptionCustomerServiceName = this.$store.getters.currentUserInfo.usrName;
        if (this.currentRow.id) {
          const res = await this.$api['data/complaint/modifyComplaint']({ ...this.currentRow });
          this.loading = true;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("修改投诉记录成功");
          this.$emit("handleSuccess");
        } else {
          const res = await this.$api['data/complaint/addComplaint']({ ...this.ruleForm });
          this.loading = false;
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success("添加投诉记录成功");
          this.$emit("handleSuccess");
        }
      });
    },
    plannedReturnVisitDateChange(val) {
      const date = new Date(val);
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      this.$set(this.ruleForm, 'closingDate', year + '-' + month + '-' + day + " 00:00:00");
    },
    async getProjectName() {
      const res = await this.$api['reception/subscribe/customerIdAllByOrderList']({ customerId: this.ruleForm.customerId });
      if (res.code === 200) {
        this.projectNameOptions = res.data;
      } else {
        this.projectNameOptions = [];
        this.$message.error(res.msg);
      }
    },
    customerChange(id) {
      this.customerList.forEach(item => {
        if (item.id === id) {
          this.ruleForm.customerName = item.name;
          this.ruleForm.customerPhone = item.phone;
          this.ruleForm.customerSex = item.sex;
          this.ruleForm.customerAge = item.age;
          this.ruleForm.customerCode = item.code;
          this.getProjectName();
        }
      });
    },
    projectChange(id) {
      this.projectNameOptions.forEach(item => {
        if (id === item.id) {
          this.ruleForm.projectName = item.projectName;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pull-right{
  float: right;
}
.font-color{
  color:#FF6600;
}
.button-color{
  color:#0099FF;
  border-color:#0099FF;
}
.clear{
  clear: both;
}
.el-col,.el-col-12{
  line-height: 40px;
}
.dialog-magin-y{
  margin: 0 150px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
